import React, { useMemo, useState, useEffect, useRef } from 'react';
import styles from './index.less';
import BicycleCard from '../../components/bicycleCard';
import filterIcon from '../../assets/search/searchIcon.png';
import ExhibitorCard from '../../components/exhibitorCard';
// import top_img from '../../assets/index/top_img.png'
import { useHistory, useDispatch, useSelector, useStore } from 'dva';
import InViewPort from '../../components/InViewPort';
import { setIsShowType, getIsShowType } from '../../utils/authority';
import useIsPageTop from '../../components/hooks/useIsPageTop';
import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { Autoplay, Pagination } from 'swiper';
import { getLocale, useIntl, setLocale } from 'umi';
function Index() {
  const intl = useIntl();
  const header = useRef();
  const [isExhibitor, setIsExhibitor] = useState(false);
  // console.log(useIsPageTop, 'useIsPageTop')
  const headerIsTop = useIsPageTop(header);
  const {
    productPageIndex,
    exhibitorPageIndex,
    productLastPage,
    productList,
    exhibitorList,
    exhibitorLastPage,
    exhibitorValue,
    productValue,
    bannerList,
    adList,
  } = useSelector(({ index }) => index);

  const history = useHistory();
  const dispatch = useDispatch();
  // const [productPageIndex, setProductPageIndex] = useState(1)
  // const [exhibitorListPageIndex, setExhibitorPageIndex] = useState(1)

  useMemo(() => {}, []);

  const [mySwiper, setMySwiper] = useState();
  const [selectIndex, setSelectIndex] = useState(0);
  useMemo(() => {
    SwiperCore.use([Autoplay, Pagination]);
  }, []);

  useEffect(() => {
    // console.log(store, "store")
    // console.log(selector,"selector")
    let showType = getIsShowType();
    // console.log(showType, 'showType')
    if (!showType) {
      setIsShowType('1');
      setIsExhibitor(false);
    } else {
      if (showType == '1') {
        setIsShowType(1);
        setIsExhibitor(false);
      } else {
        setIsShowType('2');
        setIsExhibitor(true);
      }
    }

    dispatch({
      type: 'index/apiGetProductList',
      payload: {
        pageSize: 10,
        page: 0,
        enabled: true,
        approved: true,
        approveResult: 'APPROVED',
        language: getLocale() == 'zh-CN' ? 'ZH' : 'EN',
      },
      isReset: true,
    });
    dispatch({
      type: 'index/apiGetBannerList',
      payload: {
        putLocationId: 10,
      },
    });
    dispatch({
      type: 'index/apiGetAdList',
      payload: {
        putLocationId: 66,
      },
    });
    dispatch({
      type: 'index/apiGetUserSelf',
    });
    // dispatch({
    //   type: 'index/apiGetWechatConfig',
    //   payload: {
    //   },
    // });
  }, []);
  function goToSeach() {
    history.push('/search');
  }

  function onProEnter() {
    console.log(productPageIndex, productLastPage, 'productLastPage');
    if (productPageIndex < productLastPage) {
      dispatch({
        type: 'index/apiGetProductList',
        payload: {
          pageSize: 10,
          page: productPageIndex + 1,
          enabled: true,
          approved: true,
          approveResult: 'APPROVED',
          language: getLocale() == 'zh-CN' ? 'ZH' : 'EN',
        },
      });
    }
  }

  const onClickAd = (ad) => {
    ad.link && window.open(ad.link);
  };

  /*function onExEnter() {
    // console.log(exhibitorPageIndex, exhibitorLastPage, 'exhibitorLastPage')
    if (exhibitorPageIndex < exhibitorLastPage) {
      dispatch({
        type: 'index/apiGetExhibitorList',
        payload: {
          pageSize: 10,
          page: exhibitorPageIndex + 1,
        }
      })
    }

  }*/
  // console.log(headerIsTop, 'headerIsTop')
  return (
    <div className={styles.page}>
      <div className={styles.top}>
        {/* 顶部Card */}
        {/* <img src={top_img} className={styles.topImg}></img> */}
        <Swiper
          module={[Pagination, Autoplay]}
          loop={true}
          autoplay={true}
          pagination={{ clickable: true }}
          spaceBetween={0}
          slidesPerView={1}
          onSlideChange={(e) => {
            setSelectIndex(e.activeIndex);
          }}
          onSwiper={(swiper) => {
            setMySwiper(swiper);
            setSelectIndex(swiper.activeIndex);
          }}
        >
          {bannerList &&
            bannerList.map((item, index) => {
              return (
                <SwiperSlide key={index}>
                  <div className={`${styles.swiperItem}`}>
                    <img src={item.pictures}></img>
                  </div>
                </SwiperSlide>
              );
            })}
        </Swiper>
      </div>
      <div className={styles.content} ref={header}>
        <div className={`${styles.header} ${headerIsTop && styles.headerFixed}`}>
          <p
            className={styles.p1}
            style={{ color: !isExhibitor ? '#333333' : '#999999' }}
            onClick={() => {
              setIsExhibitor(false);
              setIsShowType('1');
            }}
          >
            {intl.formatMessage({ id: 'RECOMMEND_EXHIBITS' })}
            <span>{productValue && productValue}</span>
          </p>
          {/*<p className={styles.p2} style={{ color: isExhibitor ? '#333333' : '#999999' }} onClick={() => {
            setIsExhibitor(true)
            setIsShowType("2")
          }}>展商<span>{exhibitorValue && exhibitorValue}</span></p>*/}
          <img src={filterIcon} onClick={goToSeach}></img>
        </div>
        {!isExhibitor ? (
          <div className={styles.goods}>
            {productList &&
              productList.map((item, index) => {
                const lestIndex = productList.length - 1;
                if (index == lestIndex) {
                  return (
                    <InViewPort key={index} onEnter={onProEnter}>
                      <BicycleCard obj={item} key={index} />
                    </InViewPort>
                  );
                }
                return (
                  // <div key={index}>
                  <>
                    {index != 0 && (index + 1) % 6 == 0 ? (
                      <>
                        <BicycleCard obj={item} key={index} />
                        {adList[((index + 1) / 6) % adList.length] && (
                          <div
                            className={styles.adBox}
                            style={{
                              background: `url(${
                                adList[((index + 1) / 6) % adList.length].pictures
                              }) center no-repeat`,
                              backgroundSize: 'cover',
                            }}
                            onClick={() => onClickAd(adList[((index + 1) / 6) % adList.length])}
                          ></div>
                        )}
                      </>
                    ) : (
                      <BicycleCard obj={item} key={index} />
                    )}
                    {/* </div> */}
                  </>
                );
              })}
            {productList && productList.length % 2 != 0 && (
              <div className={styles.emptyLabel}></div>
            )}
          </div>
        ) : (
          <div className={styles.exhibitor}>
            {exhibitorList.map((item, index) => {
              const lestIndex = exhibitorList.length - 1;
              if (index == lestIndex) {
                return (
                  <InViewPort key={index} onEnter={onExEnter}>
                    <ExhibitorCard obj={item} />
                  </InViewPort>
                );
              }
              return <ExhibitorCard obj={item} key={index} />;
            })}
          </div>
        )}
      </div>
    </div>
  );
}

export default Index;
